<!DOCTYPE html>
<html>
<head>
    <title>BootstrapValidator demo</title>

     <link rel="stylesheet" href="./css/Log.css"/>
    <link rel="stylesheet" href="./css/bootstrapValidator.css"/>

    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./js/bootstrapValidator.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <!-- form: -->
            <section>
                <div class="page-header col-lg-3 ">
                    <h1>信息员注册</h1>
                </div>

                

                <div class="col-lg-8 col-lg-offset-2 sss">
                    <form id="defaultForm" method="post" class="form-horizontal" action="target.php">

                        <div class="asd">
                            <label class="col-lg-1 control-label"></label>
                            <span class="asd-sp1"><a href="start.html">返回</a> </span>
                            <span class="asd-sp2">|</span>
                            <span class="asd-sp3">用户注册</span>
                        </div>
                        
                        
                        <div class="form-group">
                            <label class="col-lg-3 control-label"><span class="spp">*</span>真实姓名</label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control" name="username" autocomplete="off" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label"><span class="spp">*</span>身份证号码</label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control" name="email[]" autocomplete="off" />
                            </div>
                        </div>

                        <!-- <div class="form-group">
                            <label class="col-lg-3 control-label">Other email address</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="email[]" autocomplete="off" />
                            </div>
                        </div> -->

                        <div class="form-group">
                            <label class="col-lg-3 control-label"><span class="spp">*</span>初始密码</label>
                            <div class="col-lg-6">
                                <input type="password" class="form-control" name="password" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label"><span class="spp">*</span>确认密码</label>
                            <div class="col-lg-6">
                                <input type="password" class="form-control" name="confirmPassword" />
                            </div>
                        </div>

                        <!-- <div class="form-group">
                            <label class="col-lg-3 control-label">Website</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="website" placeholder="http://" />
                            </div>
                        </div> -->

                        <div class="form-group">
                            <label class="col-lg-3 control-label"><span class="spp">*</span> 手机号码</label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control" name="phoneNumber" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">验证码</label>
                            <div class="col-lg-3">
                                <input type="text" class="form-control" name="phoneNumber" />
                            </div>

                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">选择镇街</label>
                            <div class="col-lg-3">
                                <select class="form-control" name="country">
                                    <option value="">请选择</option>
                                    <option value="fr">桂城街道</option>
                                    <option value="de">九江镇</option>
                                    <option value="it">西樵镇</option>
                                    <option value="jp">丹灶镇</option>
                                    <option value="ru">狮山镇</option>
                                    <option value="gb">大沥镇</option>
                                    <option value="us">里水镇</option>
                                </select>
                            </div>
                            <label class="col-lg-2 control-label">选择镇街</label>
                            <div class="col-lg-3">
                                <select class="form-control" name="country">
                                    <option value="">请选择</option>
                                    <option value="fr">桂城街道</option>
                                    <option value="de">九江镇</option>
                                    <option value="it">西樵镇</option>
                                    <option value="jp">丹灶镇</option>
                                    <option value="ru">狮山镇</option>
                                    <option value="gb">大沥镇</option>
                                    <option value="us">里水镇</option>
                                </select>
                            </div>
                            
                        </div>
                        
                        <div class="form-group">
                            <label class="col-lg-3 control-label"><span class="spp">*</span> 申请理由</label>
                            <div class="col-lg-3">
                                <!-- <textarea type="text" class="form-control" name="phoneNumber" > -->
                                    <textarea name="phoneNumber" id="" cols="50" rows="4"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-lg-9 col-lg-offset-3">
                                <button type="submit" class="btn btn-primary">立即创建</button>
                                <button type="submit" class="btn btn-primary btn2">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </section>
            <!-- :form -->
        </div>
    </div>

<script type="text/javascript">
$(document).ready(function() {
    $('#defaultForm').bootstrapValidator({
        message: 'This value is not valid',
//        live: 'disabled',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                message: '请填写真实姓名',
                validators: {
                    notEmpty: {
                        message: '姓名不能为空'
                    },
                    remote: {
                        type: 'POST',
                        url: 'remote.php',
                        message: '姓名不可用',
                        delay: 1000
                    },
                    different: {
                        field: 'password',
                        message: '用户名和密码不能彼此相同'
                    }
                }
            },
            'email[]': {
                validators: {
                    notEmpty: {
                        message: '身份证号码不能为空'
                    },
                    emailAddress: {
                        message: '请输入有效身份证'
                    },
                    remote: {
                        type: 'POST',
                        url: 'remote.php',
                        message: '电子邮件不可用',
                        delay: 2000
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: '密码不能为空'
                    },
                    identical: {
                        field: 'confirmPassword',
                        message: '密码和确认密码不相同'
                    },
                    different: {
                        field: 'username',
                        message: '密码不能与用户名相同'
                    }
                }
            },
            confirmPassword: {
                validators: {
                    notEmpty: {
                        message: '确认密码不能为空'
                    },
                    identical: {
                        field: 'password',
                        message: '密码和确认密码不相同'
                    }
                }
            },
            website: {
                validators: {
                    uri: {
                        message: 'The input is not a valid URL'
                    }
                }
            },
            phoneNumber: {
                validators: {
                    digits: {
                        message: '手机号码只能为数字'
                    }
                }
            },
            // country: {
            //     validators: {
            //         notEmpty: {
            //             message: 'The country is required and can\'t be empty'
            //         }
            //     }
            // }
        }
    });
});
</script>
</body>
</html>
